import React, { lazy, Suspense, useState } from "react";
import "@/index.less";
import Class from "./components/Class";
import Canvas from "./components/canvas";
import bigImage from "./assets/897-annex.png";
import smallImage from "./assets/ icon_edit_head.svg";

const LazyDemo = lazy(() => import("@/components/LazyDemo"));
// prefetch
// prefetch 是告诉浏览器页面可能需要的资源，会在空闲时加载
const PreFetchDemo = lazy(
  () =>
    import(
      /*webpackChunkName: "PreFetchDemo" */
      /*webpackPrefetch: true */
      "@/components/PreFetchDemo"
    )
);
// preload
// preload 告诉浏览器一定会加载的资源
const PreloadDemo = lazy(
  () =>
    import(
      /*webpackChunkName: "PreloadDemo" */
      /*webpackPrefetch: true */
      "@/components/PreFetchDemo"
    )
);

function App() {
  const [count, setCounts] = useState("");

  const [show, setShow] = useState(false);

  const onClick = () => {
    import("./app.less");
    setShow(true);
  };

  const onChange = (e: any) => {
    setCounts(e.target.value);
  };
  return (
    <>
      <h2>webpack5-react-fffs</h2>
      <Class />
      <Canvas />
      {/* <img src={bigImage} alt="" /> */}
      {/* <img src={smallImage} alt="" /> */}
      <p>受控组件</p>
      <input type="text" value={count} onChange={onChange} />
      <br />
      <p>非受控组件</p>
      <input type="text" />

      {show && (
        <Suspense fallback={<div>loading</div>}>
          <LazyDemo />
        </Suspense>
      )}
      <h2 onClick={onClick}>展示</h2>
      {show && (
        <>
          <Suspense fallback={null}>
            <PreloadDemo />
          </Suspense>
          <Suspense fallback={null}>
            <PreFetchDemo />
          </Suspense>
        </>
      )}
    </>
  );
}
export default App;
